<template>
  <div class="content">
    <div class="left">
      left
      <ul>
        <li
          v-for="(item, index) in productList"
          :key="index"
          @click="selectLabel(item)"
        >
          <input
            type="checkbox"
            :value="index"
            id="item.id"
            :class="`input${item.id}`"
          >
          <label
            for="index"
          >
            {{ item.title }}
          </label>
        </li>
      </ul>
    </div>
    <div class="right">
      right
      <ul>
        <li
          v-for="(value, vIndex) in selectedList"
          :key="vIndex"
          @click="deleteValue(value)"
        >
          {{ value.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup() {
    const dataMethods = reactive({
      selectedList: [],
      productList: [
        {
          id: 11,
          title: '汉堡包'
        },
        {
          id: 22,
          title: '油条'
        },
        {
          id: 33,
          title: '鸡排'
        },
        {
          id: 66,
          title: '凉皮'
        },
        {
          id: 77,
          title: '饺子'
        },
      ],
      selectLabel(item: any) {
        if(!this.selectedList.includes(item)) {
          // selectedlist中没有当前点击的元素，添加当前点击的元素
          this.selectedList.push(item)
          document.querySelector(`.input${item.id}`).checked = true
          // console.log('select', this.selectedList)
        } else {
          document.querySelector(`.input${item.id}`).checked = false
          this.selectedList = this.selectedList.filter(value => {
            return value.id !== item.id
          })
        }
        console.log('number', this.selectedList)
      },
      deleteValue(value: any) {
        document.querySelector(`.input${value.id}`).checked = false
        this.selectedList = this.selectedList.filter(curValue => {
          return curValue.id !== value.id
        })
      }
    })

    return {
      ...toRefs(dataMethods)
    }
  }
})
</script>

<style scoped lang="less">
.content {
  display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
}
</style>
